<template>
  <div>
    <div class="cardList-wrapper">
      <el-row :gutter="24">
        <el-col :xs="12" :md="12" :sm="12" :lg="6">
          <div class="card-item card-item-one">
            <div class="card-title"><i class="el-icon-s-flag" /> 区域总数</div>
            <div class="all-count">
              <count-to :startVal="0" :endVal="areaTotal" :duration="1200" />
              <span class="suffix">个</span>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :md="12" :sm="12" :lg="6">
          <div class="card-item card-item-two">
            <div class="card-title"><i class="el-icon-s-shop" /> 充电桩总数</div>
            <div class="all-count">
              <count-to :startVal="0" :endVal="stationTotal" :duration="1200" />
              <span class="suffix">个</span>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :md="12" :sm="12" :lg="6">
          <div class="card-item card-item-three">
            <div class="card-title"><i class="el-icon-camera-solid"></i> 充电记录数</div>
            <div class="all-count">
              <count-to :startVal="0" :endVal="recordTotal" :duration="2200" />
              <span class="suffix">条</span>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :md="12" :sm="12" :lg="6">
          <div class="card-item card-item-four">
            <div class="card-title"><i class="el-icon-bank-card" /> 订单总额</div>
            <div class="all-count">
              ¥ <count-to :startVal="0" :endVal="moneyTotal" :duration="2200" />
              <span class="suffix">元</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-card class="sale-card">
      <div slot="header" class="clearfix">
        <span>订单额 统计图</span>
      </div>
      <el-row class="sale-container" :gutter="16">
        <el-col :span="16" style="height: 100%">
          <!-- <line-chart :chartData="lineData" :title="currentName" /> -->
          <!-- <el-card></el-card> -->
          <div ref="gradientsBar" style="height: 350px"></div>
        </el-col>
        <el-col :span="8" style="height: 100%">
          <div class="shop-title">订单排行榜</div>
          <shop-rank style="height: calc(100% - 50px)" :rankData="rankData" />
        </el-col>
      </el-row>
    </el-card>

    <el-row :gutter="24" class="sale-list">
      <el-col :span="8">
        <el-card title="充电桩分布图" :hoverable="true" :bordered="false">
          <!-- <pie-chart :chartData="pieData" /> -->
          <div slot="header" class="clearfix">
            <span>充电桩分布图</span>
          </div>
          <hollow-pie
            style="height: 350px"
            v-if="stationData.length != 0"
            :stationData="stationData"
            :xAxisData="xAxisData"
          />
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card title="充电桩充电占比" :hoverable="true" :bordered="false">
          <div slot="header" class="clearfix">
            <span>充电桩充电占比</span>
          </div>
          <pie-bar
            class="chart-bar"
            v-if="stationRatio != 0"
            :ratio="stationRatio"
            style="height: 350px"
          />
          <!-- <more-chart :chartData="moreData" /> -->
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card title="订单额 占比图" :hoverable="true" :bordered="false">
          <div slot="header" class="clearfix">
            <span>订单额 占比图</span>
          </div>
          <!-- <hot-chart :chartData="hotData" /> -->
          <div ref="echarts3" style="height: 350px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import countTo from "vue-count-to";
import shopRank from "./components/shopRank.vue";
import pieBar from "./components/pieBar.vue";
import hollowPie from "./components/hollowPie.vue";
import { listArea } from "@/api/area";
import { stationTotal, listStation } from "@/api/station";
import { listRecord } from "@/api/record";
import * as echarts from "echarts";
import resize from "@/mixins/resize";
export default {
  name: "cardList",
  mixins: [resize],
  components: { countTo, shopRank, pieBar, hollowPie },
  data() {
    return {
      areaTotal: null,
      stationTotal: null,
      recordTotal: null,
      recordObj: {},
      moneyTotal: 0,
      queryParams2: {
        pageNum: 1,
        pageSize: 1000,
      },
      chargeStation: 0,
      rankData: [],
      xAxisData: [],
      seriesData: [],
      stationRatio: 0, //充电桩使用占比
      stationData: [], //充电桩占比图数据
    };
  },
  mounted() {
    // this.rankData = this.getrankData();
    console.log("rankData", this.rankData);
    this.getAreaList();
    this.getStationList();
    this.getRecordList();
    // this.rankData = this.getrankData();
    this.$nextTick(() => {
      this.initEchart();
    });
  },
  methods: {
    getAreaList() {
      this.loading = true;
      listArea(this.queryParams2).then((response) => {
        this.areaTotal = response.data.total;
      });
    },
    getStationList() {
      stationTotal().then((response) => {
        this.stationTotal = response.data.length;
        response.data.forEach((item) => {
          if (item.state === "充电中") {
            this.chargeStation += 1;
          }
        });
        let num = parseFloat(this.chargeStation);
        let total = parseFloat(this.stationTotal);
        this.stationRatio = total <= 0 ? "0" : Math.round((num / total) * 10000) / 100.0;
        listStation(this.queryParams2).then((response) => {
          let obj = {};
          response.data.records.forEach((item) => {
            if (item.state === "充电中") {
              this.chargeStation += 1;
            }

            let key = item.areaName;
            if (obj[key] != undefined) {
              obj[key] += 1;
            } else {
              obj[key] = 1;
            }
          });
          let list = [];
          for (let i in obj) {
            list.push({
              name: i,
              value: obj[i],
            });
          }
          this.stationData = list;
        });
        console.log(
          "this.stationTotal",
          this.stationTotal,
          "this.chargeStation",
          this.chargeStation,
          "this.stationRatio",
          this.stationRatio,
          "this.stationData",
          this.stationData
        );
      });
    },
    getRecordList() {
      listRecord(this.queryParams2).then((response) => {
        this.recordTotal = response.data.total;
        let obj = {};
        response.data.records.forEach((item) => {
          this.moneyTotal += item.money;
          let key = item.areaName;
          if (obj[key] != undefined) {
            obj[key] += item.money;
          } else {
            obj[key] = item.money;
          }
        });
        let list = [];
        let list2 = [];
        let xAxisList = [];
        let seriesList = [];
        for (let i in obj) {
          list.push({
            area: i,
            value: obj[i],
          });
          list2.push({
            name: i,
            value: obj[i],
          });
          xAxisList.push(i);
          seriesList.push(obj[i]);
        }
        this.rankData = list.sort((a, b) => {
          return b.value - a.value;
        });
        var pieData = list2;
        this.xAxisData = xAxisList;
        this.seriesData = seriesList;
        console.log("xAxisData", this.xAxisData);
        // 饼状图
        const echarts3 = echarts.init(this.$refs.echarts3);
        const eachrts3Option = {
          tooltip: {
            trigger: "item",
            formatter: (params) => {
              return (
                params.marker +
                " " +
                params.name +
                "：" +
                params.value +
                " (" +
                params.percent +
                "%)"
              );
            },
          },
          series: [
            {
              data: pieData,
              type: "pie",
            },
          ],
        };
        echarts3.setOption(eachrts3Option);

        console.log("xAxisData2222", this.xAxisData);
        //中间柱状图
        this.myChart = echarts.init(this.$refs.gradientsBar);
        this.myChart.setOption(
          {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
              padding: [5, 5],
            },
            grid: {
              left: 30,
              right: 20,
              bottom: 40,
              top: 30,
            },
            xAxis: [
              {
                type: "category",
                data: this.xAxisData,
                axisLine: {
                  lineStyle: {
                    color: "#cecece",
                  },
                },
                axisLabel: {
                  color: "#666",
                },
                axisTick: {
                  show: false,
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                axisTick: {
                  show: false,
                },
                axisLine: {
                  lineStyle: {
                    color: "#cecece",
                  },
                },
                axisLabel: {
                  color: "#666",
                },
                splitLine: {
                  show: false,
                },
              },
            ],
            series: [
              {
                name: "订单金额",
                type: "bar",
                data: this.seriesData,
                barWidth: "20",
                barGap: "80%",
                type: "bar",
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#5171fd",
                      },
                      {
                        offset: 1,
                        color: "#c97afd",
                      },
                    ]),
                  },
                },
              },
            ],
          },
          true
        );
      });
    },
    initEchart() {},
  },
  computed() {
    stationRatio;
  },
};
</script>
<style lang="less" scoped>
// @import "../../../styles/mixin.scss";

.cardList-wrapper {
  .card-item {
    box-sizing: border-box;
    height: 150px;
    padding: 15px 15px 0;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 25px;
    box-shadow: 3px 5px 15px rgba(40, 40, 40, 0.36);
    &.card-item-one {
      background: linear-gradient(to right, #5171fd, #c97afd);
      &:hover {
        box-shadow: 0 5px 10px #c97afd;
      }
    }
    &.card-item-two {
      background: linear-gradient(to right, #3dadf6, #737bfc);
      &:hover {
        box-shadow: 0 5px 10px #737bfc;
      }
    }
    &.card-item-three {
      background: linear-gradient(to right, #ea677c, #ef9b5f);
      &:hover {
        box-shadow: 0 5px 10px #ef9b5f;
      }
    }
    &.card-item-four {
      background: linear-gradient(to right, #42d79b, #a6e25f);
      &:hover {
        box-shadow: 0 5px 10px #a6e25f;
      }
    }
    &:hover {
      transform: scale(1.03);
      transition: all 0.1s ease-out;
    }
    .card-title {
      color: #fff;
      font-size: 1rem;
    }
    .all-count {
      color: #fff;
      font-size: 1.9rem;
      font-weight: bold;
      margin-top: 12px;
      padding-left: 25px;
      .suffix {
        font-size: 0.75rem;
      }
    }
    .card-info {
      color: #fff;
      font-size: 0.85rem;
      height: 46px;
      margin-top: 8px;
      .abs-bottom {
        position: absolute;
        bottom: 7px;
        left: 0;
      }
      .up {
        color: #1afa29;
      }
      .down {
        color: rgb(250, 30, 16);
      }
    }
  }
}
.sale-card {
  background: #fff;
  width: 100%;
  margin-top: 6px;

  .sale-container {
    margin: 24px 0;
    height: 350px;
    box-sizing: border-box;
    padding: 0 24px;
    .shop-title {
      height: 50px;
      font-size: 1rem;
    }
  }
}
.sale-list {
  margin-top: 25px;
}
</style>
